<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>发货管理 - 电商ERP系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    
        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
                <ul class="layui-tab-title">
                    <li  class=""th:classappend="${status==null || status==0 } ? 'layui-this' : ''"><a th:href="@{/fahuo/order_send_list(status=0)}">待分配</a></li>
                    <li  class=""th:classappend="${ status==1} ? 'layui-this' : ''"><a th:href="@{/fahuo/order_send_list(status=1)}">待发货</a></li>
                    <li  class=""th:classappend="${isSettle == 0 && status==4} ? 'layui-this' : ''" ><a th:href="@{/fahuo/order_send_list(status=4,isSettle=0)}">已发货待结算</a></li>
                    <li  class=""th:classappend="${isSettle == 1 && status==4} ? 'layui-this' : ''"><a th:href="@{/fahuo/order_send_list(status=4,isSettle=1)}">已结算</a></li>
                </ul>
            </ul>
        </div>
    <!-- start sp-wrapper -->
    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">

            <form class="layui-form layui-form-pane1" method="get" th:action="${searchUrl}">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="orderNum" th:value="${orderNum}" placeholder="订单号" class="layui-input">
                    </div>
                   <div class="layui-inline" style="display: none;">
                       <input type="text" name="mobile" th:value="${mobile}" placeholder="收货人手机号" class="layui-input">
                   </div>
                    <div class="layui-inline">
                        <input type="text" name="logisticsCode" th:value="${logisticsCode}" placeholder="快递号" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="startTime" id="startTime" placeholder="发货时间" th:value="${startTime}" autocomplete="off">
                        </div>
                        <!-- <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="endTime" id="endTime" placeholder="yyyy-MM-dd" th:text="${endTime}" autocomplete="off">
                        </div> -->
                    </div>
                    <div class="layui-inline">
                        <select id="status" name="status" placeholder="发货状态">
                            <option value="-1">全部状态</option>
                            <option th:each="st:${T(com.b2c.entity.enums.EnumErpOrderSendStatus).values()}" th:value="${st.index}" th:text="${st.name}">实售</option>
                  
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select id="shopId" name="shopId" >
                            <option value="">选择店铺</option>
                            <option th:each="sh:${shopList}" th:value="${sh.id}" th:text="${sh.name + ' - ' + sh.typeName}">实售</option>
                  
                        </select>
                    </div>
                    
                    <div class="layui-inline">
                        <select id="supplierId" name="supplierId" >
                            <option value="">选择供应商</option>
                            <option th:each="sh:${supplierList}" th:value="${sh.id}" th:text="${sh.name }"></option>
                  
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn">搜索</button>
                        <i>总共：&nbsp;[[${totalSize}]]&nbsp;条记录</i>
                        
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" >
                        <a class="layui-btn layui-btn-primary" href="javascript:;" th:if="${isSettle == 0 && status==4}" id="generate_purchase_btn">生成新采购单（<span id="order-num">0</span>）</a>
                        <a class="layui-btn layui-btn-primary" href="javascript:;" th:if="${status == 0}" id="batch_gys_btn">批量分配发货供应商（<span id="order-num">0</span>）</a>
                        <a class="layui-btn layui-btn-primary" href="javascript:;" th:if="${status == 1}" id="batch_send_btn">批量确认发货（<span id="order-num">0</span>）</a>
                        <a class="layui-btn layui-btn-primary" href="javascript:;" th:if="${status == 1}" id="export_order">导出待发货订单excel</a>
                        <a href="javascript:;" th:if="${status == 1}" id="export_order_txt" style="color:#6961fe;">导出待发货订单文本</a>
                        <a class="layui-btn layui-btn-primary" href="javascript:;" th:if="${status == 1}" id="pull_pdd_wuliu">更新拼多多物流</a>
                    </div>

                    <div class="layui-inline"></div>

                </div>
            </form>



        </div>
    </fieldset>

    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <form method="post" action="/fahuo/generate_purchase_for_order_send_list" id="generate_purchase">
        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <th><input id="allCheck" type="checkbox"/>ID</th>
                    <th width="160px">订单号</th>
                    <!-- <th>下单时间</th> -->
                    <th width="200px">商品</th>
                    <th width="300px">收货信息</th>
                    <th>发货信息</th>
                    <th>店铺</th>
                    <!-- <th>备注</th> -->
                    <th>状态</th> 
                    <th>供应商</th>
           
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="sp-data">
                <tr th:each="item:${list}">
                    <td >
                        <!--th:if="${item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).HasSend.getIndex() && item.isSettle == 0}"-->
                        <input type="checkbox" name="ids" th:value="${item.id}"  class="ids currCheck" />
                        <h th:text="${item.id}"></h>
                    </td>
                    <td>
                        <b th:text="${item.orderSn}"></b><br />
                        <b th:text="${item.orderTime }" style="color:#a1a6a6"></b>
                        <p style="color: red;background-color: #eaefef;" th:text="${item.remark}"></p>
                    </td>
                    
                    <td>
                        <div th:each="it:${item.items}" style="float: left;width:100%;">
                            <img th:src="${it.goodsImg}" class="pimg" style="float: left;">
                        <p style="float: left; padding-left: 5px;">
                            <h  th:text="${#strings.abbreviate(it.goodsNumber,16)}"></h><br/>
                            <h th:text="${it.goodsSpec}"></h> -- 
                            <h style="color: red" th:text="${it.quantity}"></h><br/>
                            <h style="color: rgb(139, 139, 139)" th:text="${it.goodsSpecNumber}"></h>
                      
                            
                        </p>
                    </div>
                    </td>
                    <td>
                        <p th:if="${#strings.isEmpty(item.mobile)==false}"><b th:text="${item.consignee}"></b>&nbsp;<b th:text="${item.mobile}"></b></p>

                        <p th:if="${#strings.isEmpty(item.address)}">
                            <b th:text="${item.province}"></b>&nbsp;
                            <b th:text="${item.city}"></b>&nbsp;
                            <b th:text="${item.area}"></b>
                        </p>
                        <p>
                            <b th:text="${item.address}"></b> 
                        </p>
                    </td>
                    <td>
                        
                            
                            <p th:if="${#strings.isEmpty(item.logisticsCode)==false}">
                                <h th:text="${item.logisticsCode}"></h>
                            </p>
                            <p th:if="${#strings.isEmpty(item.logisticsCompany)==false}"><b
                                    th:text="${item.logisticsCompany}"  style="color:#a1a6a6"></b></p>
                            <p th:if="${#strings.isEmpty(item.deliveryTime)==false}"><b
                                        th:text="${item.deliveryTime}"  style="color:#a1a6a6"></b></p>
                    </td>
                    <td >
                        
                        <b th:if="${item.shopType == 4}" style="color: rgb(74, 11, 212);" > <img src="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" style="width: 20px;height:20px"/></b>
                        <b th:if="${item.shopType == 5}" style="color: rgb(74, 11, 212);" ><img src="https://mms-static.pddpic.com/express/favicon.ico" style="width: 20px;height:20px"/></b>
                        <b th:if="${item.shopType == 6}" style="color: rgb(74, 11, 212);" ><img src="https://lf1-fe.ecombdstatic.com/obj/eden-cn/upqphj/homepage/icon.svg" style="width: 20px;height:20px"/></b>
                        <b th:text="${item.shopName}"></b>
                    </td>
                   
                    <!-- <td>
                        <b th:text="${item.remark}" style="color: red;"></b>
                    </td> -->
                        

                    <td >
                        <b th:text="${T(com.b2c.entity.enums.EnumErpOrderSendStatus).getName(item.sendStatus)}"></b><br />
                        <b th:if="${item.sendType == 1}" style="color: rgb(74, 11, 212);" >供应商代发</b>
                        <b th:if="${item.sendType == 9}" style="color: rgb(16, 252, 107);" >自有仓库发货</b>
                        <br />
                        <b style="color: red;" th:if="${item.isSettle == 1}">已结算</b>
                    </td>
                    <td th:text="${item.supplierName}"></td>
      
                    <td>
                        <a th:attr="order-id=${item.id},remark=${item.remark}" href="javascript:;"  class="sellerRemark">
                            添加备注
                        </a>
                        <a th:if="${item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).WaitOut.getIndex() || item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).Picking.getIndex()  }" class="cancel_order" th:attr="data-id=${item.id}" href="javascript:;">取消订单</a>
                        <p th:if="${item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).WaitOut.getIndex()}">
                            <i  class="fenpei layui-btn-sm layui-btn-primary" th:attr="data-id=${item.getId()}">分配发货供应商</i>
                        </p>

                        <p th:if="${item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).Picking.getIndex() && #strings.isEmpty(item.logisticsCode)}">
                            <i  class="hand_express layui-btn-sm layui-btn-primary" th:attr="data-id=${item.getId()}">手动发货</i>
                        </p>
                        <p th:if="${item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).Picking.getIndex() && #strings.isEmpty(item.logisticsCode)==false }">
                            <i  class="confirm_send layui-btn-sm layui-btn-primary" th:attr="data-id=${item.getId()},kuaidi=${item.logisticsCode}">确认发货</i>
                        </p>

                        

                        <p th:if="${item.sendType == 9}">
                            <i class="send" th:attr="data-id=${item.getId()}">订单发货</i>
                        </p>
                        
                        
                        <p th:if="${item.sendStatus >= T(com.b2c.entity.enums.EnumErpOrderSendStatus).HasOut.getIndex() && item.sendType == 9}">
                            <i  class="print_express" th:attr="data-id=${item.getId()}">打印快递单</i><br />
                        </p>
                        <p th:if="${item.sendStatus == T(com.b2c.entity.enums.EnumErpOrderSendStatus).HasSend.getIndex() && item.sendType == 9}">
                            <i class="print layui-btn-sm layui-btn-primary"  th:attr="data-id=${item.getId()}">打印发货单</i>
                        </p>
                        
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="pages">
                <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
            </div>
        </div>
    </form>
    </div>
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
    <script type="text/template" id="fenpei">
        <div class="T-box">
            <p>
                <select id="send-supplierId">
                    <option value="">选择发货供应商</option>
                    <option th:each="item:${supplierList}" th:value="${item.id}" th:text="${item.name}">供应商代发</option>
               
                </select>
            </p>
           
            <p class="T-result"><span>&nbsp;</span><em id="erro"></em></p>
        </div>
    </script>
    <script type="text/template" id="send-goods">
        <div class="T-box">
            <p><span>快递公司</span>
                <select id="send-company">
                    <option value="">请选择快递公司</option>
                    <option th:each="item:${company}" th:value="${item.getCode()}" th:text="${item.getName()}"></option>
                </select>
            </p>
            <p><span>快递单号</span><input type="text" name="express_code" id="express_code" /></p>
            <p class="T-result"><span>&nbsp;</span><em id="erro"></em></p>
        </div>
    </script>


    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('#allCheck').on('change', function (e) {
                var checked = $('#allCheck').prop('checked');
                $('.currCheck').prop('checked', checked);
                $('#order-num').text(getNum());
                $('#order-num_').text(getNum());
            });

            $('.currCheck').on('change', function (e) {
                var allChecked;
                for (var i = 0; i < $('.currCheck').length; i++) {
                    var checked = $('.currCheck').eq(i).prop('checked');
                    if (!checked) {
                        $('#allCheck').prop('checked', false);
                        $('#order-num').text(getNum());
                        $('#order-num_').text(getNum());
                       return;
                    }
                }
                $('#allCheck').prop('checked', true);
                $('#order-num').text(getNum());
                $('#order-num_').text(getNum());
            });

            function getNum() {
                var num = 0;
                for (var i = 0; i < $('.currCheck').length; i++) {
                    var checked = $('.currCheck').eq(i).prop('checked');
                    if (checked) {
                        num++;
                    }
                }
                return num;
            }
            // (按订单生成采购单)
            $("#generate_purchase_btn").click(function () {
                var ids = [];
                $("input[name^='ids']").each(function (i, el) {
                    if ($(this).is(':checked'))
                        ids.push($(this).val());
                });
                //console.log(ids);
                if (ids.length == 0)
                    alert("请选择订单");
                else {
                    if (confirm("你选中的订单将会生成采购单，确认要操作吗？")) {
                        $("#generate_purchase").submit();
                    }
                }
            });





            
            //导出订单
            $("#export_order").click(function () {
                var status = $("#status").val();
                if (status == '' || status == "-1" || status== 'null' || status== null) {
                    alert("请选择状态");
                    return;
                }
                var supplierId = $("#supplierId").val();
                if (supplierId == '' || supplierId == "0") {
                    alert("请选择供应商");
                    return;
                }
                
                window.location.href = "/fahuo/order_send_list_export?status=" + status + "&supplierId=" + supplierId;
            })

            $("#export_order_txt").click(function () {
                var status = $("#status").val();
                if (status == '' || status == "-1" || status== 'null' || status== null) {
                    alert("请选择状态");
                    return;
                }
                var supplierId = $("#supplierId").val();
                if (supplierId == '' || supplierId == "0") {
                    alert("请选择供应商");
                    return;
                }
                
                window.location.href = "/fahuo/order_send_list_export_txt?status=" + status + "&supplierId=" + supplierId;
            })
            
                
            
            //更新拼多多物流
            $("#pull_pdd_wuliu").click(function () {
                $.ajax({
                    url: "/ajax_fahuo/pull_pdd_order_logistics",
                    type: "POST",
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        alert("更新了" + res.data + "条数据");
                        window.location.reload();
                    }
                });
            })
        });
    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'layer','form'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;

            laydate.render({
                elem: '#startTime'
            });
            laydate.render({
                elem: '#endTime'
            });
            $(function () {
                $("#shopId").val('[[${shopId}]]');
                $("#status").val('[[${status}]]');
                $("#supplierId").val('[[${supplierId}]]');
                
                form.render('select'); //刷新select选择框渲染
            });

            //分配发货方式
            $('.fenpei').click(function (e) {
                e.stopPropagation();
                e.preventDefault();
                var id = $(this).attr('data-id');
                Tips.confirm({
                    title: '分配发货供应商',
                    content: $('#fenpei').html(),
                    define: function () {
                        var data = {
                            id: id,
                            supplierId: $("#send-supplierId option:selected").val(),
                        };
                        $.ajax({
                            url: "/ajax_fahuo/order_send_type_edit",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.msg('成功')
                                    location.reload(true);
                                    // Tips.alert('成功', function () {
                                    //     location.reload(true);
                                    // });
                                } else {
                                    Tips.alert(res.msg);
                                }
                            }
                        });
                    }
                });//Tips.confirm 
            });

            // (批量分配发货供应商)
            $("#batch_gys_btn").click(function () {
                var ids = [];
                $("input[name^='ids']").each(function (i, el) {
                    if ($(this).is(':checked'))
                        ids.push($(this).val());
                });
                //console.log(ids);
                if (ids.length == 0)
                    alert("请选择订单");
                else {
                   
                        Tips.confirm({
                            title: '批量分配发货供应商',
                            content: $('#fenpei').html(),
                            define: function () {
                                var data = {
                                    id: ids.join(),
                                    supplierId: $("#send-supplierId option:selected").val(),
                                };
                                $.ajax({
                                    url: "/ajax_fahuo/order_send_type_edit",
                                    type: "POST",
                                    dataType: 'json',
                                    contentType: 'application/json',
                                    data: JSON.stringify(data),
                                    success: function (res) {
                                        if (res.code == 0) {
                                            // layer.msg('成功')
                                            // location.reload(true);
                                            Tips.alert(res.msg, function () {
                                                location.reload(true);
                                            });
                                        } else {
                                            Tips.alert(res.msg);
                                        }
                                    }
                                });
                            }
                        });//Tips.confirm
                    
                }
            });


            // 填写物流
            $('.hand_express').click(function (e) {
                // var o = document.getElementById("express_code").value;
                // alert(o)
                
                e.stopPropagation();
                e.preventDefault();
                // $("input[name='express_code']").val('123');
                // alert($("input[name='express_code']").val());
                var id = $(this).attr('data-id');
                Tips.confirm({
                    title: '手动填写物流信息',
                    content: $('#send-goods').html(),
                    define: function () {
                        var data = {
                            id: id,
                            company: $("#send-company  option:selected").text(),
                            companyCode: $("#send-company  option:selected").val(),
                            code: $("input[name='express_code']").val()
                        };
                        $.ajax({
                            url: "/ajax_fahuo/order_hand_express",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.msg('成功')
                                    location.reload(true);
                                    // Tips.alert('成功', function () {
                                    //     location.reload(true);
                                    // });
                                } else {
                                    Tips.alert(res.msg);
                                }
                            }
                        });
                    }
                });
            });

            //确认发货（有物流信息的）
            $('.confirm_send').click(function(){
                var kuaidi = $(this).attr("kuaidi");
                var id = $(this).attr('data-id');
                // alert(kuaidi)
                // layer.prompt(formType = 1, title = false, value = kuaidi);
                layer.prompt({
                    formType: 3,
                    value: kuaidi,
                    title: ''
                }, function(value, index, elem){
                    var data = {
                            id: id,
                            company: '',
                            companyCode: '',
                            code: value
                        };
                        $.ajax({
                            url: "/ajax_fahuo/order_hand_express",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                layer.close(index)
                                layer.msg(res.msg);
                                window.location.reload();
                            }
                        });
                });
            })

            //批量确认发货
            $('#batch_send_btn').click(function(){
                var ids = [];
                $("input[name^='ids']").each(function (i, el) {
                    if ($(this).is(':checked'))
                        ids.push($(this).val());
                });
                console.log(ids);
                if (ids.length == 0)
                    alert("请选择订单");
                else {
                    if (confirm("确定批量发货吗？")) {
                        var data = {
                                    id: ids.join()
                                };
                        $.ajax({
                            url: "/ajax_fahuo/order_send_batch",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                if (res.code == 0) {
                                    // layer.msg('成功')
                                    // location.reload(true);
                                    Tips.alert(res.msg, function () {
                                        location.reload(true);
                                    });
                                } else {
                                    Tips.alert(res.msg);
                                }
                            }
                        });
                    }
                }
            })


            //取消订单
            $(".cancel_order").click(function () {
                var id = $(this).attr("data-id");
                layer.prompt({
                    formType: 3,
                    value: '',
                    title: '请输入取消订单理由'
                }, function(value, index, elem){
                    var data = {
                            id: id,
                            remark: value
                        };
                        $.ajax({
                            url: "/ajax_fahuo/order_cancel",
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (res) {
                                layer.close(index)
                                layer.msg(res.msg);
                                window.location.reload();
                            }
                        });
                });


            })

            //订单备注
            $(".sellerRemark").click(function(){
                    var id = $(this).attr('order-id');
                    var remarkT = $(this).attr('remark');
                    var obj = $(this).siblings('b').eq(0);

                    layer.prompt({
                        formType: 2,
                        value: remarkT,
                        title: '请输入备注'
                    }, function(value, index, elem){
                        var data = {id:id, remark:value};
                        $.ajax({
                            url: "/ajax_fahuo/order_remark_ajax",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg(res.msg);
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });


                });
            });

            $(".pimg").click(function(){
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });

            function imgShow(outerdiv, innerdiv, bigimg, _this){
                var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                $(bigimg).attr("src", src);//设置#bigimg元素的src属性

                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function(){
                    var windowW = $(window).width();//获取当前窗口宽度
                    var windowH = $(window).height();//获取当前窗口高度
                    var realWidth = this.width;//获取图片真实宽度
                    var realHeight = this.height;//获取图片真实高度
                    var imgWidth, imgHeight;
                    var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                    if(realHeight>windowH*scale) {//判断图片高度
                        imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                        imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                        if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                            imgWidth = windowW*scale;//再对宽度进行缩放
                        }
                    } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                        imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                    } else {//如果图片真实高度和宽度都符合要求，高宽不变
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

                    var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                    $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                });

                $(outerdiv).click(function(){//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }

        });
    </script>
</div>
</body>
<html>
